<template>
  <div class="member">
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane label="用户管理" name="first">
              <el-form :model="loginInfo" :rules="rules" ref="loginInfo" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="昵称" prop="nickname">
                     <el-input  v-model="loginInfo.nickname"></el-input>
                  </el-form-item>
                   <el-form-item label="性别">
                      <el-radio-group v-model="loginInfo.sex">
                        <el-radio :label="1">女</el-radio>
                        <el-radio :label="2">男</el-radio>
                      </el-radio-group>
                   </el-form-item>
                   <el-form-item label="年龄">
                      <el-input-number v-model="loginInfo.age"></el-input-number>
                   </el-form-item>

                   <el-form-item label="头像">
                      <el-upload
                        class="avatar-uploader"
                        :action="onUrl()"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :limit="1"
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG,"
                        >
                        <img v-if="loginInfo.avatar" :src="loginInfo.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                   </el-form-item>

                   <el-form-item label="介绍">
                       <el-input
                         type="textarea"
                         placeholder="请输入内容"
                         v-model="loginInfo.sign"
                         maxlength="30"
                         show-word-limit
                       >
                       </el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="ModifyInformation">确认</el-button>
                   </el-form-item>

              </el-form>


          </el-tab-pane>
          <el-tab-pane label="改密码" name="second">
            <el-form :model="padForm" :rules="rules" ref="padForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="原密码" prop="used">
                   <el-input type="password" v-model="padForm.used"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpad">
                   <el-input type="password"  v-model="padForm.newpad"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verification">
                   <el-input type="password"  v-model="padForm.verification"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
  </div>
</template>

<script>
  import {login,modifyucenter,getMemberInfo,modifyUcenterMember} from '@/http'
  import cookie from "js-cookie"
  import '~/assets/css/sign.css'
  export default {
    layout: 'sign',
    data(){
       let validatePass = (rule, value, callback) => {
         if(this.padForm.newpad == value){
            callback();
         }else{
           callback(new Error('密码不一样'));
         }
       }
      return{
        activeName:"first",
        token:"",
        loginInfo:{
          id:""
        },
        padForm:{},
        UcenterMember:{},
        rules:{
          used:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          newpad:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          verification:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { validator: validatePass,trigger: 'blur' },
          ],
          nickname:[
            { required: true, message: '昵称不能为空', trigger: 'blur' },
          ],



        }
      }
    },
    created() {
      this.showInfo();
    },
    methods:{
      //获取cookie值
      showInfo(){
        let ucenter = cookie.get("get_ucenter")
        if(ucenter){
         this.loginInfo = JSON.parse(ucenter);
        }
      },
      //删除cookie值
      exit(){
        cookie.remove("get_token")
        cookie.remove("get_ucenter")
        window.location.href = "/"
      },
      //修改密码
      submitForm(){
          this.$refs.padForm.validate(val=>{
            if(val){
              let member = {
                mobile :  this.loginInfo.mobile,
                password : this.padForm.used
              }
              login(member).then(res=>{
                if(res.success){
                  member.password = this.padForm.newpad
                  modifyucenter(member).then(res=>{
                     this.$notify({
                      title: '修改密码',
                      message: '这是一条成功的提示消息',
                      type: 'success'
                    });
                    this.exit();
                    window.location.href="/login"
                  })
                }
              })


            }else{
              return false;
            }
          })
      },
      ModifyInformation(){
       this.$refs.loginInfo.validate(val=>{
         if(val){
            modifyUcenterMember(this.loginInfo).then(res=>{
              this.$notify({
                title: '修改密码',
                message: '这是一条成功的提示消息',
                type: 'success'
              });
              cookie.set("get_token",res.data.token,{domain:"localhost"})
              getMemberInfo().then(res=>{
                this.loginInfo = res.data.member
                cookie.set("get_ucenter",this.loginInfo,{domain:"localhost",expires:7})
                this.$router.push("/setUp")
              })
            })
         }else{
           return false;
         }
       })
      },
      //图片上传成功
      handleAvatarSuccess(res, file){
        this.loginInfo.avatar = res.data.url
      },
      //上传头像地址
      onUrl(){
        return "http://localhost:9002/eduoss/up"
      },
      //图片上传之前的判断
      beforeAvatarUpload(file){
      	const isJpg = (file.type === 'image/jpeg')||(file.type === 'image/png');
      	if(!isJpg){
      		this.$message.error('上传图片只能是jpg和png')
      		return false;
      	}
      	const islt2M = (file.size/1024/1024)<2
      	if(!islt2M){
      		this.$message.error('上传图片不能超过2M')
      		return false;
      	}
      },
    }
  };
</script>


<style type="text/css">

  .member{
    width: 50%;
    margin:6.25rem auto;
    background: #fff;
    padding: 3.125rem;
   box-shadow: 1px 1px 40px #00FFFF;
  }
  .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

</style>
